<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="./../../template/templateAdminUsuarios.xhtml">
            <ui:define name="title">Nuevo</ui:define>
            <ui:define name="descripcionHeader">
                <i class="fa fa-users"/> Usuarios
                <small>Nuevo usuario</small>
            </ui:define>
            <ui:define name="breadcrumbHeader">

                <li class="active">Nuevo usuario</li>

            </ui:define>
            <ui:define name="content">

                <div id="UsuarioCreateDialog">
                    <h:form id="UsuarioCreateForm">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="panel panel-info" style="">
                                    <div class="panel-heading">
                                        <h3 class="panel-title" style="font-weight: bold"> Nuevo usuario</h3>
                                    </div>

                                    <div class="panel-body">

                                        <div class="row">

                                            <div class="col-md-3 col-lg-3 " align="center">
                                                <img alt="User Pic" src="#{request.contextPath}/resources/img/photo.png" class="img-circle"/>
                                                <p:commandButton id="createButton" style="height: 0px; width: 0px;visibility:hidden " action="#{usuarioController.create}"  update="UsuarioCreateForm,:growl" oncomplete="handleSubmit(args,UsuarioCreateDialog);"/>

                                            </div>
                                            <div class=" col-md-9 col-lg-9 "> 
                                                <div role="form">

                                                    <div class="form-group">
                                                        <label for="usuario">Usuario</label>
                                                        <p:inputText id="usuario" placeholder="Usuario" styleClass="form-control" value="#{usuarioController.selected.username}" title="Usuario" required="true" requiredMessage="Ingrese usuario"/>


                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6">   
                                                            <div class="form-group">
                                                                <label for="nombreUsuario">Nombre</label>
                                                                <p:inputText id="nombreUsuario" placeholder="Nombre" styleClass="form-control" value="#{usuarioController.selected.nombre}" title="Nombre" required="true" requiredMessage="Ingrese nombre"/>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label for="apellidoUsuario">Apellido</label>
                                                                <p:inputText id="apellidoUsuario" placeholder="Apellido" styleClass="form-control" value="#{usuarioController.selected.apellido}" title="Apellido" required="true" requiredMessage="Ingrese apellido"/>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label for="mail">Mail</label>
                                                                <p:inputText id="mail" placeholder="Mail" styleClass="form-control" value="#{usuarioController.selected.mail}" title="Mail" required="true" requiredMessage="Ingrese Mail"/>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">

                                                                <label for="rol">Rol</label>

                                                                <p:selectOneMenu id="rol" 
                                                                                 styleClass="form-control"
                                                                                 value="#{rolController.selected}" 
                                                                                 converter="rolConverter"
                                                                                 style="width:100%;text-transform:capitalize;"
                                                                                 filter="true" filterMatchMode="startsWith"
                                                                                 effect="blind"
                                                                                 required="true"
                                                                                 requiredMessage="Seleccione rol"
                                                                                 >

                                                                    <f:selectItem itemLabel="Rol..."/>
                                                                    <f:selectItems value="#{rolController.items}"
                                                                                   var="item"
                                                                                   itemValue="#{item}"
                                                                                   itemLabel="#{item.descripcion.toString()}"

                                                                                   />  


                                                                </p:selectOneMenu>



                                                            </div>
                                                        </div>
                                                    </div>


                                                    <div class="row">

                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label for="password">Password</label>
                                                                <p:password id="password" placeholder="Password" styleClass="form-control" value="#{usuarioController.selected.pass}" title="Usuario" required="true" requiredMessage="Ingrese usuario"/>

                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <h:outputLabel value="Confirme" for="password2" />
                                                                <p:password id="password2" placeholder="Confirme password" styleClass="form-control" maxlength="8" value="#{usuarioController.selected.pass}" title="Password2" required="true" requiredMessage="Confirmar  password"/>
                                                            </div>
                                                        </div>

                                                    </div>


                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="panel-footer">

                                        <p:commandLink onclick="document.getElementById('UsuarioCreateForm:createButton').click();" styleClass="btn btn-primary" style="box-shadow: none!important;">

                                            Aceptar

                                        </p:commandLink>
                                        <button id="btnReset" type="reset" data-toggle="tooltip" data-placement="bottom" title="Resetear valores" class="btn btn-danger sombra" style="float: right;">

                                            <i class="fa fa-times"/>


                                        </button>

                                        <button type="button"  id="btnListaUsuarios"   data-toggle="tooltip" data-placement="bottom" title="Ver lista de usuarios" style="float: right;margin-right: 10px;box-shadow: none!important;" class="btn btn-warning ">
                                            <i class="fa fa-list" />
                                         
                                        </button>


                                    </div>   
                                </div>

                            </div>
                        </div>


                    </h:form>
                </div>

            </ui:define>

        </ui:composition>
        <script src="#{request.contextPath}/resources/js/jsfcrud.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                $('#btnListaUsuarios').tooltip();
                $('#btnReset').tooltip();

            });




        </script>
    </body>
</html>

